<template>
    <div>
        <van-swipe ref="swipe" class="swiper-sec" :autoplay="2000" :loop="loop" :show-indicators="showIndicators" @change="onChange">
            <van-swipe-item class="swiper-item" v-for="item in swiperImages" :key="item.picName">
                <img class="swiper-item-img" v-lazy="item.picSrc" />
            </van-swipe-item>
            <!-- 自定义指示器 -->
            <template #indicator>
                <slot name="indicator"/>
            </template>
        </van-swipe>
    </div>
</template>

<script>
    export default {
        props: {
            swiperImages: {type: Array, default: () => []},     // 轮播图图片数组
            onChange: {type: Function, default: () => {}},      // 每一页轮播结束后触发
            loop: {type: Boolean, default: true},               // 是否开启循环播放
            showIndicators: {type: Boolean, default: true},     // 是否是否显示指示器
        }
    }
</script>

<style lang="less" scoped>
    /* 轮播区域 */
    .swiper-sec {
        width: 700px;
        height: 618px;
        margin: 0 auto;
        /* 轮播项 */
        /deep/.van-swipe__track {
            height: 575px;
            margin-bottom: 13px;
            /* 轮播图片 */
            .swiper-item-img {
                width: 100%;
                height: 100%;
            }
        }
    }
</style>
